<template>
  <van-checkbox-group v-model="checked" @change="ToggleGroup" ref="CheckboxGroup">
    <div class="cart" v-for="(item, key) in list" :key="key">
      <!-- 复选框 绑定购物车id -->
      <van-checkbox :name="item.id"></van-checkbox>
      <!-- 滑动单元格 -->
      <van-swipe-cell>
        <!-- 商品卡片 -->
        <van-card :title="item.product.name" :thumb="item.product.thumbs_text" @click-thumb="toProductInfo(item.proid)">
          <template #title>
            <div class="title">{{ item.product.name }}</div>
          </template>

          <!-- 卡片的插槽部分 -->
          <template #desc v-if="item.attrs">
            <van-tag v-for="(attr, index) in item.attrs" :key="index" class="tag" type="primary">{{ attr.value }}</van-tag>
          </template>
          <template #desc v-else>
          <van-tag class="tag" type="danger">无规格数据</van-tag>
          </template>

          <template #tags>
            <div class="price">单价：￥{{ item.price }}</div>
          </template>

          <template #price>
            <div class="price">合计：￥{{ item.total }}</div>
          </template>

          <!-- 卡片的商品数量 步进器 -->
          <template #num>
            <van-stepper v-model="item.nums" @change="CartUpdate(item)" />
          </template>
        </van-card>

        <!-- 滑动单元格插槽 右侧滑动 -->
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="del(item)"/>
        </template>
      </van-swipe-cell>
    </div>
  </van-checkbox-group>

  <!-- 提交动作栏 -->
  <van-submit-bar :price="total" button-text="提交订单" @submit="confirm">
    <van-checkbox v-model="CheckAll" :indeterminate="isIndeterminate" @change="toggle">全选</van-checkbox>
  </van-submit-bar>
</template>

<script setup>
    const { proxy } = getCurrentInstance()

    let list = ref([])
    let checked = ref([]) //默认选中的复选框
    let CheckAll = ref(false)
    let CheckboxGroup = ref(null)
    let isIndeterminate = ref(false);

    onBeforeMount(() => {
      CartInfo()
    })

    //购物车数据查询
    const CartInfo = async () => {
      var result = await proxy.$POST({
        url: '/cart/index',
        params: { busid: proxy.$business.value.id }
      })

      if (result.code == 0) {
        proxy.$fail(result.msg)
        return false
      }

      result.data.map(item => item.attrs = JSON.parse(item.attrs))

      list.value = result.data
    }

    //跳转到商品详情界面
    const toProductInfo = proid => proxy.$router.push({ path: '/product/info', query: { proid } })

    // 全选
    const toggle = () => CheckboxGroup.value.toggleAll()

    //判断单个选中
    const ToggleGroup = (names) => {
      CheckAll.value = checked.value.length == list.value.length
      isIndeterminate.value = checked.value.length > 0 && checked.value.length < list.value.length
    }

    //合计的价格
    let total = computed(() => {
      var total = 0

      list.value.map((item) => {
        if(checked.value.includes(item.id)) total += parseFloat(item.total)
      })

      return parseFloat(total*100)
    })

    //更新购物车数量
    let CartUpdate = async (item) => 
    {
      var result = await proxy.$POST({
        url: '/cart/edit',
        params: {cartid:item.id, nums: item.nums}
      })

      if(result.code == 0)
      {
        proxy.$fail(result.msg)
        return false
      }

      CartInfo()
    }


    //删除购物车
    let del = async (item) =>
    {
      proxy.$confirm({
        message: "确认是否删除" + item.product.name + "?",
      }).then(async () => {

        //发起请求
        let result = await proxy.$POST({
          url: "/cart/del",
          params: { cartid: item.id},
        });

        if (result.code == 0) 
        {
          proxy.$fail(result.msg);
          return false;
        } else 
        {
          CartInfo();
        }
      }).catch(() => {})
    }

  //确认订单
  let confirm = () => 
  {
    if(checked.value.length <= 0)
    {
      proxy.$fail('请选择购物车产品')
      return false
    }

    proxy.$router.push({path: '/cart/confirm',query:{cartids: checked.value.join(',')}})
  }
</script>